<!--
  大乐透彩球选择器
-->
<template>
  <div class="bg-white bb-l" v-shake="gen">
    <template v-if="bold">
      <div class="tips p-3">选择<b>1-4</b>个前区胆码</div>
      <ball-group group="前区胆码" :conflict="groups[1]" v-model="groups[0]" :num="35" :max="4"/>
      <div class="tips px-3 pb-3">选择<b>2</b>个或以上前区拖码，胆码+拖码>=<b>6</b>个</div>
      <ball-group group="前区" :conflict="groups[0]" v-model="groups[1]" :num="35"/>
      <hr class="mb-3">
      <div class="tips px-3 pb-3">选择<a>0-1</a>个后区胆码</div>
      <ball-group group="后区胆码" :conflict="groups[3]" v-model="groups[2]" :num="12" :max="1" class="ball-blue"/>
      <div class="tips px-3 pb-3">选择<a>2</a>个或以上后区拖码</div>
      <ball-group group="后区" :conflict="groups[2]" v-model="groups[3]" :num="12" class="ball-blue"/>
    </template>
    <template v-else>
      <div class="tips p-3">至少选择<b>5</b>个红球， <a>2</a>个蓝球
        <em class="text-orange float-right clickable" @click="gen">
          <img class="img" src="../../assets/img/shake.png"> 摇一摇
        </em>
      </div>
      <ball-group group="前区" v-model="groups[0]" :num="35"/>
      <hr class="mb-3">
      <ball-group group="后区" v-model="groups[1]" :num="12" class="ball-blue"/>
    </template>
  </div>
</template>

<script>
import { bets, gen } from './calculator'
import BallGroup from './ball-group'

export default {
  components: {BallGroup},
  props: ['value', 'bold'],
  name: 'ball-select',
  data: () => ({
    groups: [] // 已选号码分组
  }),
  created () {
    this.$on('clear', this.clear)
  },
  methods: {
    clear () {
      this.groups = [[]]
    },
    gen () {
      this.groups = gen()
    }
  },
  watch: {
    groups (g) {
      this.$emit('input', {
        groups: g,
        bets: bets(g, this.bold)
      })
    },
    bold () {
      this.clear()
    }
  }
}
</script>
